<template>

<a-row type="flex">
    <a-col :flex="1">
        <a-card>
            <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="Search" />
                <a-tree
                checkable
                :auto-expand-parent="autoExpandParent"
                :tree-data="treeData"
             
                >
                <template #title="{ title }">
                    <span v-if="title.indexOf(searchValue) > -1">
                    {{ title.substr(0, title.indexOf(searchValue)) }}
                    <span style="color: #f50">{{ searchValue }}</span>
                    {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                    </span>
                    <span v-else>{{ title }}</span>
                </template>
                </a-tree>
        </a-card>
    </a-col>
    <a-col :flex="0.2"></a-col>
    <a-col :flex="3">

        <a-card>
             <a-table :dataSource="dataSource" :columns="columns" /> 
        </a-card>
    </a-col>
</a-row>

    


  
</template>

<script setup>
import { columns } from '.'
const searchValue= ref("")
const autoExpandParent= ref(true)
const treeData = [{
  title: '支付宝配置',
  key: '1'
},{
  title: '微信配置',
  key: '2'
},{
  title: '上传配置',
  key: '3'
}
  
   ];
const dataSource=ref([   {
            key: '1',
            name: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
          },
          {
            key: '2',
            name: '胡彦祖',
            age: 42,
            address: '西湖区湖底公园1号',
          }])
</script>

<style scoped></style>